@use '../flow-common';

:host {
  @apply w-full h-full;
  --output-size: 14px;
  --f-component-hover-border: theme('colors.primary.300');
}

:host::ng-deep {
  @include flow-common.connection;
  @include flow-common.background;
  @include flow-common.line-alignment;
  @include flow-common.minimap;
  .f-connection {
    .connection-marker {
      circle, rect, path {
        fill: var(--connection-color);
      }
    }
    &.f-selected {
      z-index: 1;
      .f-connection-path {
        stroke: var(--components-card-option-selected-border);
      }
      .connection-marker {
        circle, rect, path {
          fill: var(--components-card-option-selected-border);
        }
      }
    }
    &.f-hover:not(.f-selected) {
      z-index: 1;
      .f-connection-path {
        stroke: var(--f-component-hover-border);
      }
      .connection-marker {
        circle, rect, path {
          fill: var(--f-component-hover-border);
        }
      }
    }

    &.toolset, &.agent, &.knowledge, &.xpert {
      stroke-dasharray: 4, 2;
    }
  }
  
  .f-node-input,
  .f-node-output {
    @apply flex justify-center items-center;
    &:not(.f-node) {
      @include flow-common.connectors;
    }
    &.f-node-input-connected,
    &.f-node-output-connected {
      background-color: var(--minimap-view-color);
    }
    &.f-node-output-not-connectable,
    &.f-node-input-not-connectable {
      background-color: var(--disabled-color);
    }
  }

  .f-node.f-component {
    .f-component.f-node-output {
      svg {
        visibility: hidden;
      }

      .inner-dot {
        @apply w-full h-full flex justify-center items-center shrink-0 bg-primary-400;
      }

      &.danger {
        .inner-dot {
          @apply bg-orange-500;
        }
      }
    }

    &:not(.ngm-executor-agent):hover {
      .f-component.f-node-output {
        .inner-dot {
          width: var(--output-size);
          height: var(--output-size);
          @apply rounded-full border-[0.5px] border-primary-300;
          svg {
            visibility: visible;
          }
          &:hover {
            @apply transition-all origin-center scale-150;
          }
        }

        &.danger {
          .inner-dot {
            @apply border-orange-400;
          }
        }
      }
    }

    .f-component.f-node-input.left {
      border-radius: 0;
      width: 3px;
      height: 10px;
      border: none;
      @apply bg-blue-500;
    }
  }
}

.f-node.f-component, .f-group.f-component {
  .node-toolbar {
    @apply invisible;
  }
  &:hover, &.ngm-selected {
    .node-toolbar {
      @apply visible;
    }
  }
}

f-flow {
  height: 100%;
}
.f-node {
  @include flow-common.node;
  @apply border-[2px] rounded-2xl border-transparent;
  &.f-hover:not(.ngm-selected) {
    border-color: var(--f-component-hover-border);
  }
  &.ngm-selected {
    @apply border-components-card-option-selected-border shadow-md;
  }
}
.f-node {
  cursor: default;
}
.f-node.f-component {
  &.running {
    @apply animate-twinkling-slow;
  }
  &.success {
    @apply border-green-500 dark:border-green-800;
  }
  &.error {
    @apply border-red-500 dark:border-red-800;
  }
  &.interrupted {
    @apply border-neutral-700 dark:border-neutral-500;
  }
}

.f-selection-area {
  background-color: var(--selection-area-color);
}

.f-group {
  display: block;
  background-color: var(--team-group-bg);
  padding: 15px;
  @apply border border-solid border-transparent;

  .group-title {
    position: absolute;
    top: 5px;
    left: 5px;
  }

  &.f-selected {
    @apply border border-solid border-primary-500;

    .f-resize-handle {
      display: block;
    }
  }
}

.f-resize-handle {
  --resize-handle-size: 16px;
  --resize-handle-offset: -8px;
  display: none;
  position: absolute;
  width: var(--resize-handle-size);
  height: var(--resize-handle-size);
  border-radius: 1px;
  @apply border border-solid border-primary-500 bg-components-card-bg;

  &.f-resize-handle-left-top {
    top: var(--resize-handle-offset);
    left: var(--resize-handle-offset);
    cursor: nwse-resize;
  }

  &.f-resize-handle-right-top {
    top: var(--resize-handle-offset);
    right: var(--resize-handle-offset);
    cursor: nesw-resize;
  }

  &.f-resize-handle-left-bottom {
    bottom: var(--resize-handle-offset);
    left: var(--resize-handle-offset);
    cursor: nesw-resize;
  }

  &.f-resize-handle-right-bottom {
    bottom: var(--resize-handle-offset);
    right: var(--resize-handle-offset);
    cursor: nwse-resize;
  }
}